<!DOCTYPE html>
<html>

<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta charset="UTF-8">
    <title>json2canvas 调试</title>
    <link href="https://cdn.staticfile.org/jsoneditor/5.32.5/jsoneditor.min.css" rel="stylesheet">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: #FFFFFF
        }

        .app {
            height: 100%;
            display: flex;
            flex-direction: row
        }

        .view {
            padding: 20px;
        }

        .view-left {
            border-right: #CCC solid 1px;
            width: 30%
        }

        .view-right {
            width: 70%
        }

        .jsonview {
            width: 100%;
            height: 900px;
            overflow: scroll;
        }

        canvas {
            border: #CCC 1px solid
        }

    </style>
</head>

<body>
    <div class="app" id="app">
        <div class="view view-left">
            <div id="jsonview" class="jsonview">
            </div>
            <block v-for="item in radios">
                <input type="radio" :id="item" :value="item" v-model="picked">
                <label :for="item">{{item}}</label>
                <br>
            </block>
        </div>
        <div class="view">
            <canvas id='myCanvas'></canvas>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/jsoneditor/5.32.5/jsoneditor.min.js"></script>
    <% if ( 'production' == htmlWebpackPlugin.options.mode ) { %>
    <script src="https://unpkg.com/cax@1.3.1/dist/cax.js"></script>
    <script src="./json2canvas.js"></script>
    <% } else { %>
    <% for ( var i = 0; i < htmlWebpackPlugin.files.js.length ;i++ ){ %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
    <% } %>
    <% } %>
    <script src="./option.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: '元素测试',
                data: null,
                editor: null,
                radios: [],
            },
            watch: {
                picked: function(newValue, oldValue) {
                    this.setCanvas(newValue);
                }
            },
            mounted: function() {
                let radios = [];
                for (const key in option) {
                    radios.push(key);
                }
                this.radios = radios;

                let url = new URL(window.location.href)
                let param = new URLSearchParams(url.search);
                param.get('picked') && (this.picked = param.get('picked'))
                
                this.setCanvas(this.picked);
            },
            methods: {
                setCanvas(picked) {
                    if (!this.editor) {
                        this.editor = new JSONEditor(document.getElementById("jsonview"), {
                            onChangeJSON: (json) => {
                                console.time('draw');
                                json2canvas.draw(json, '#myCanvas');
                                console.timeEnd('draw');
                            }
                        }, option[picked]);
                        this.editor.expandAll();
                    } else {
                        this.editor.update(option[picked])
                    }

                    console.time('draw');
                    json2canvas.draw(option[picked], '#myCanvas');
                    console.timeEnd('draw');
                }
            }

        })

    </script>
</body>

</html>
